import { useReducer } from "react";

import AddTask from "./components/AddTask.js";
import TaskList from "./components/TaskList.js";

import {
  tasksReducer,
  initialTasks,
  changedAction,
  addedAction,
  deletedAction,
} from "./reducer/tasks.js";

export default function TaskApp() {
  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);

  function handleAddTask(text) {
    dispatch(addedAction(text));
  }

  function handleChangeTask(task) {
    dispatch(changedAction(task));
  }

  function handleDeleteTask(taskId) {
    dispatch(deletedAction(taskId));
  }

  return (
    <>
      <h1>Prague itinerary</h1>
      <AddTask onAddTask={handleAddTask} />
      <TaskList
        tasks={tasks}
        onChangeTask={handleChangeTask}
        onDeleteTask={handleDeleteTask}
      />
    </>
  );
}
